<template>
  <zm-view ref="view">
    <zm-navbar back-icon-color="#ffffff" :border-bottom="false" background="transparent" immersive></zm-navbar>
    <view class="header-wrap">
      <image class="header-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/user-signin-bg.png')" mode="widthFix" />
      <view class="flex flex-col relative z-10 text-white">
        <zm-number-roll :value="userInfo.integral" color="#ffffff" font-size="70rpx" font-weight="bold"></zm-number-roll>
        <view class="text-line-1 mt-24 flex items-center">
          <text>我的积分</text>
          <view class="line"></view>
          <zm-icon-text custom-class="click-animation" name="arrow" color="#ffffff" text="积分记录" text-left @click="onClickIntegral"></zm-icon-text>
        </view>
      </view>
    </view>
    <view class="content-wrap">
      <view class="flex flex-col px-24 py-32 radius-16 bg-white">
        <view>
          <text class="font-32 font-bold">每日签到</text>
          <text v-show="historyDoSign.log.length" class="font-500 text-bbb ml-12 font-24">
            已连续签到
            <text class="text-discount">{{ historyDoSign.log.length }}</text>
            天
          </text>
        </view>
        <view class="grid grid-cols-4 gap-x-36 gap-y-20 mt-24">
          <view
            v-for="(item, index) in memberSignRule.ruleList"
            :key="index"
            :style="[signinItemStyle(index)]"
            class="signin-item flex items-center justify-center py-10 radius-16"
            :class="{ 'is-active': index === activeIndex, 'is-last': index === memberSignRule.ruleList.length - 1, 'is-signin': isSignin(item) }"
          >
            <view v-if="index < memberSignRule.ruleList.length - 1" class="flex h-full flex-col items-center justify-between">
              <text class="date-text">第{{ item.day }}天</text>
              <zm-icon v-if="isSignin(item)" name="checked" size="52rpx" :color="useColor('theme')"></zm-icon>
              <!-- 优惠券图标 -->
              <image v-else-if="item.isCoupon > 0" class="integral-icon" :src="useImage('/zuimei-film-oss/1.0.0/images/sign-leaf-coupon.png')" mode="scaleToFill" />
              <!-- 积分图标 -->
              <image v-else-if="item.isIntegral > 0" class="integral-icon" :src="useImage('/zuimei-film-oss/1.0.0/icons/integral-icon.png')" mode="scaleToFill" />
              <text v-if="isSignin(item)" class="integral-count">已签</text>
              <view v-else class="integral-count">
                <!-- 优惠券 -->
                <text v-if="item.isCoupon > 0">￥{{ item.couponInfo.showReduce | formatDigit }}</text>
                <!-- 积分 -->
                <text v-if="item.isIntegral > 0"> +{{ item.integral | formatDigit }}</text>
              </view>
            </view>
            <view v-else class="flex flex-1 h-full px-30">
              <view class="flex flex-col items-center">
                <text class="date-text">第{{ item.day }}天</text>
                <template v-if="isSignin(item)">
                  <zm-icon name="checked" size="52rpx" :color="useColor('theme')"></zm-icon>
                  <text class="integral-count">已签</text>
                </template>
                <view v-else class="flex flex-col items-center">
                  <view class="integral-count mb-4">
                    <view v-if="item.isIntegral > 0" class="flex flex-col items-center">
                      <text class="my-10">积分</text>
                      <text>+ {{ item.integral | formatDigit }}</text>
                    </view>
                    <view v-if="item.couponNum > 0" class="flex flex-col items-center">
                      <text class="my-10">优惠券</text>
                      <text>￥ {{ item.couponInfo.showReduce | formatDigit }}</text>
                    </view>
                  </view>
                </view>
              </view>
              <image v-if="item.isIntegral > 0" class="integral-max-icon" :src="useImage('/zuimei-film-oss/1.0.0/icons/integral-max-icon.png')" mode="scaleToFill" />
              <image v-if="item.isCoupon > 0" class="integral-max-icon" :src="useImage('/zuimei-film-oss/1.0.0/images/sign-pot-coupon.png')" mode="scaleToFill" />
            </view>
          </view>
        </view>
        <zm-button custom-class="mt-34" size="large" round :disabled="todayIsSignin" @click="handleConfirmSignin">{{ todayIsSignin ? "已签到" : "立即签到" }}</zm-button>
      </view>
      <view v-if="drawRule.entranceImgUrl" class="flex flex-col mt-20 px-24 py-32 radius-16 bg-white">
        <text class="font-32 font-bold">积分抽奖</text>
        <image class="draw-image" :src="drawRule.entranceImgUrl" mode="scaleToFill" @click="toView({ url: 'pages/main/blindbox-raffle/blindbox-raffle' })" />
      </view>
      <view class="flex flex-col mt-20 px-24 py-32 radius-16 bg-white">
        <text class="font-32 font-bold">签到说明</text>
        <text class="font-26 text-666 mt-24 flex flex-col">
          {{ memberSignRule.remark }}
        </text>
      </view>
    </view>
    <zm-toast ref="toast">
      <view class="flex items-center">
        <image v-if="doSignInfo.isCoupon > 0" class="integral-icon" :src="useImage('/zuimei-film-oss/1.0.0/images/sign-leaf-coupon.png')" mode="scaleToFill" />
        <image v-else class="integral-icon" :src="useImage('/zuimei-film-oss/1.0.0/icons/integral-icon.png')" mode="scaleToFill" />
        <text v-for="(item, index) in doSignInfo.doSignDes" :key="index" class="font-26 ml-6 text-white text-line-1.5">{{ item }}</text>
      </view>
    </zm-toast>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import { useStyle } from "@/utils/style"
import { mapActions, mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      activeIndex: -1,
      drawRule: {},
      signItem: { money: 0 },
      historyDoSign: { log: [] },
      memberSignRule: { ruleList: [] },
      doSignInfo: { doSignDes: [] }
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
    signinItemStyle() {
      return (index) => {
        let style = {}
        if (index === this.activeIndex) style = this.useThemeRGBAStyle()
        return useStyle(style)
      }
    },
    isSignin() {
      return (item) => {
        return this.historyDoSign.log?.some((log) => log.day == item.day)
      }
    },
    todayIsSignin() {
      return this.historyDoSign.log?.some((log) => {
        return uni.$dayJs(log.createTime).isSame(uni.$dayJs(), "day")
      })
    }
  },
  onLoad() {
    this.handleGetMemberSignRule()
    this.handleGetHistoryDoSign()
    this.handleGetDrawRule()
  },
  methods: {
    // 点击签到
    // onClickSignin(item, index) {
    //   if (!this.isSignin(item)) {
    //     this.signItem = item
    //     this.activeIndex = index
    //   }
    // },
    // 确认签到
    async handleConfirmSignin() {
      this.doSignInfo = await uni.$api.user.doSign({ day: this.signItem.day, programId: this.memberSignRule.programId, ruleId: this.signItem.ruleId })
      this.doSignInfo.isCoupon = this.memberSignRule?.ruleList[this.activeIndex]?.isCoupon
      this.activeIndex = -1
      await this.handleGetHistoryDoSign()
      await this.getUserInfo()
      this.$refs.toast.show()
    },
    // 获取签到规则
    async handleGetMemberSignRule() {
      this.memberSignRule = await uni.$api.user.memberSignRule()
    },
    async handleGetDrawRule() {
      this.drawRule = await uni.$api.integral.drawRule()
    },
    // 获取签到记录
    async handleGetHistoryDoSign() {
      this.historyDoSign = await uni.$api.user.getHistoryDoSign()
      const log = this.historyDoSign.log
      if (this.todayIsSignin) {
        this.activeIndex = log[log.length - 1].day - 1
        return
      }
      if (log.length) {
        const list = uni.$clone(log)
        const last = list.pop()
        this.activeIndex = +last.day
      } else {
        this.activeIndex = 0
      }
      this.signItem = this.memberSignRule.ruleList[this.activeIndex]
    },
    onClickIntegral() {
      this.toView({
        url: "pages/person/user-integral-record/user-integral-record"
      })
    },
    ...mapActions(["getUserInfo"])
  }
}
</script>

<style lang="scss" scoped>
.header-wrap {
  height: 443rpx;
  display: flex;
  padding: 30rpx;
  position: relative;
  padding-bottom: 80rpx;
  align-items: flex-end;
  .header-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 443rpx;
    position: absolute;
  }
  .line {
    height: 26rpx;
    margin: 0 20rpx;
    border-right: 2rpx solid #fff;
  }
}
.content-wrap {
  padding: 24rpx;
  z-index: 11;
  position: relative;
  margin-top: -24rpx;
  border-radius: 16rpx;
  background-color: var(--page-color);
  .signin-item {
    height: 156rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: all 0.3s ease;
    background-color: var(--page-color);
    border: 4rpx solid var(--page-color);
    &.is-last {
      display: flex;
      grid-column: span 2;
      flex-direction: row;
    }
    &.is-active {
      color: var(--theme-color);
      border: 2rpx solid var(--theme-color);
    }
    &.is-signin {
      .date-text {
        color: #999999;
      }
      .integral-count {
        width: 100%;
        color: #999999;
      }
    }
    .date-text {
      color: #666666;
    }
    .integral-max-icon {
      width: 118rpx;
      height: 110rpx;
      margin: auto;
      margin-right: 0;
    }
    .integral-count {
      color: #999999;
    }
  }
  .draw-image {
    width: 100%;
    height: 160rpx;
    margin-top: 24rpx;
    border-radius: 12rpx;
  }
}
.integral-icon {
  width: 60rpx;
  height: 60rpx;
}
</style>
